<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:crm="http://www.thymeleaf.org/crm"
	xmlns:dt="http://github.com/dandelion/datatables">

<head th:replace="fragment/common2 :: header"></head>
<body>

	<div th:replace="fragment/common2 :: topnav"></div>

	<div id="wrap">

		<div class="container-fluid">

			<div class="row">
				<div class="span8">
					<h4>Import Lead</h4>
				</div>
				<div class="span4 pull-right">
					<div class="btn-group pull-right">
						<a class="btn btn-primary" href="list"> <i
							class="fa fa-plus-square"></i> View Leads
						</a>
						<button class="btn btn-warning">
							<i class="fa fa-upload"></i> Import Leads
						</button>

					</div>
				</div>
			</div>


			<form th:action="@{/lead/upload}" method="POST"
				enctype="multipart/form-data">

				<div class="row-fluid">


					<div class="span12">

						<div class="alert alert-success" th:if="${message != null}">
							<button type="button" class="close" data-dismiss="alert">&times;</button>
							<b>Success!</b> Lead saved successfully.
						</div>
						
						

						<div class="row-fluid">
								<div class="span4">

									<table id="leads" dt:table="true" dt:theme="bootstrap2"
										class="table table-striped table-bordered">
										<caption>
											<b>Step 1 : Map Fields to Columns</b>
										</caption>
										<thead>

											<tr>
												<th class="span1">Column#</th>
												<th class="span3">Field</th>

											</tr>
										</thead>
										<tbody>
											<tr th:each="type , row : ${leadFields}">
												<td th:text="${row.count}"></td>

												<td><select name="cols">
														<option value="none">--Select a field--</option>
														<option th:each="l : ${leadFields}" th:value="${l}"
															th:text="#{${'lead.' + l}}">Wireframe</option>
												</select></td>

											</tr>

										</tbody>
									</table>
								</div>


								<div class="span4">
									<table class="table table-striped table-bordered">
										<caption>
											<b>Step 2 : Specify File Format Details</b>
										</caption>

										<tbody>
											<tr>
												<td>Delimiter</td>
												<td><select name="delimiter">
														<option value=",">Comma(,)</option>
														<option value=";">Semicolon(;)</option>
														<option value="|">Pipe(|)</option>

												</select></td>
											</tr>

											<tr>
												<td>Header</td>
												<td><input type="checkbox" name="header" /></td>
											</tr>



										</tbody>

									</table>


								</div>

								<div class="span4">

									<table class="table table-striped table-bordered">
										<caption>
											<b>Step 3: Select File</b>
										</caption>

										<tbody>
											<tr>
												<td>
													<div class="fileupload fileupload-new"
														data-provides="fileupload">
														<span class="btn btn-file"><span
															class="fileupload-new">Select file</span><span
															class="fileupload-exists">Change</span><input type="file"
															name="file" /></span> <span class="fileupload-preview"></span>
														<a href="#" class="close fileupload-exists"
															data-dismiss="fileupload" style="float: none">×</a>


													</div>
												</td>
											</tr>
										</tbody>

									</table>

								</div>

							</div>

					

					</div>
					<!--/span-->



				</div>
				<!--/row-->
				<div class="row-fluid  pull-right">


					<div class="form-actions">
						<button type="submit" class="btn btn-primary">Save</button>
						<button type="button" class="btn">Cancel</button>
					</div>



				</div>
			</form>


		</div>


		<div id="push"></div>
	</div>




</body>
</html>